<template>
    <!--设置-->
    <div class="center-contain">
        <div class="nav-left">
            <div class="user-box">
                <h3 @click="switchOverview()">学习中心</h3>
                <div class="user-head">
                    <img :src="account.toux" alt="" />
                </div>
                <div class="userName">{{account.name}}</div>
                <div class="userLevel">{{account.hidePhone}}</div>
            </div>
            <div class="nav-box">
                <ul class="navList">
                    <li v-for="item in navList" :key="item.name">
                        <a :class="{disable: item.enable === false}">{{ item.name }}</a>
                        <ul class="navList">
                            <li v-for="nav in item.list" :key="nav.name">
                                <a
                                    :class="{ active: nav.name === activeNav, disable: nav.enable === false}"
                                    @click="switchNav(nav)"
                                >
                                    <span>{{ nav.name }}</span>
                                    <i class="arrow-right">></i>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
        <div class="contain-right">
            <p class="hello" v-show="account.name">您好，{{account.name}}</p>
            <component
                :is="activeComponent"
                :subject="subject"
                @updateUserInfo="updateUserInfo"
                @switchNav="switchNav"
            ></component>
        </div>
    </div>
</template>
<script>
const allComponents = require.context('./admin', false, /^.*\.vue$/);
let res_components = {};
allComponents.keys().forEach(fileName => {
    let comp = allComponents(fileName);
    res_components[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default;
});
export default {
    name: 'setting',
    components: res_components,
    data() {
        return {
            account: {},
            activeNav: '个人资料',
            activeComponent: null,
            navList: [
                {
                    name: '账户信息',
                    registerType: 'login',
                    list: [
                        {
                            name: '个人资料',
                            component: 'personMsg',
                            registerType: 'login'
                        },
                        {
                            name: '地址管理',
                            component: 'addressMsg',
                            registerType: 'login'
                        }
                    ]
                },
                {
                    name: '账户安全',
                    registerType: 'login',
                    list: [
                        {
                            name: '更换手机号',
                            component: 'changePhoneNumber',
                            registerType: 'login'
                        },
                        {
                            name: '实名认证',
                            component: 'realnameCheck',
                            registerType: 'login'
                        },
                        {
                            name: '修改密码',
                            component: 'changePassword',
                            registerType: 'login'
                        }
                    ]
                },
                {
                    name: '订单管理',
                    registerType: 'login',
                    list: [
                        {
                            name: '订单管理',
                            component: 'orderManage',
                            registerType: 'login'
                        }
                    ]
                },
                {
                    name: '积分管理',
                    registerType: 'login',
                    list: [
                        {
                            enable: false,
                            name: '积分商城(建设中)',
                            component: '',
                            registerType: 'login'
                        },
                        {
                            enable: false,
                            name: '积分记录(建设中)',
                            component: '',
                            registerType: 'login'
                        }
                    ]
                }
            ],
            courseList:[ ],
            subject: null
        };
    },
    watch: {
        // eslint-disable-next-line no-unused-vars
        $route: function(newRouter) {
            this.listenNav()
        }
    },
    mounted() {
        if(this.$util.authLogin()) {
            this.account = this.$api.getAccount();
            this.listenNav();
            this.ajaxGetZsList();
        }
    },
    methods: {
        listenNav() {
            if(this.$route.query.page) {
                this.activeNav = this.$route.query.title;
                this.activeComponent = this.$route.query.page;
            } else {
                this.activeNav = '学习中心';
                this.activeComponent = 'overview';
            }
        },
        switchOverview() {
            this.activeNav = '学习中心';
            this.activeComponent = 'overview';
        },
        //切换标签页
        switchNav(nav) {
            if(nav.enable === false) {
                return
            }
            this.activeNav = nav.name;
            this.activeComponent = nav.component;
            if(nav.id) {
                this.subject = nav
            }
        },
        updateUserInfo() {
            this.account = this.$api.getAccount()
            this.$emit('updateUserInfo')
        },
        // 获取用户购买的课程
        ajaxGetZsList() {
            let option = {
                pathName: 'doGetFLabs'
            };
            this.$api.ajaxData(option).then(res => {
                let list = [];
                res.obj.forEach(item=>{
                    list.push(Object.assign(item,{
                        name: item.first_name,
                        component: 'qACenter',
                        registerType: 'login'
                    }))
                });
                this.courseList = list;
            }).catch(()=>{
              this.courseList = []
            });
        },
    }
};
</script>
<style scoped lang="scss">
.center-contain {
    display: flex;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 275px;
        margin-left: calc(50% - 50vw);
        background: url('../../assets/image/back/u542.jpg') no-repeat;
        background-size: cover;
    }
    .nav-left {
        position: relative;
        background: #fff;
        border: 1px solid #f2f2f2;
        .user-box {
            width: 160px;
            height: 160px;
            background: rgb(249, 249, 249);
            color: #333;
            h3 {
                height: 26px;
                width: 100px;
                margin: 0 auto;
                line-height: 26px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
                font-size: 12px;
                color: #fff;
                background: rgba(0, 121, 254, 1);
                text-align: center;
                cursor: pointer;
            }
            .user-head {
                display: block;
                padding: 15px 0 10px;
                img {
                    display: block;
                    width: 50px;
                    height: 50px;
                    margin: 0 auto;
                    border-radius: 50%;
                    border: 1px solid #eee;
                    background: url(../../assets/image/icon/u92.png) no-repeat;
                    background-size: contain;
                }
            }
            .userName {
                margin-bottom: 6px;
                font-size: 12px;
                text-align: center;
            }
            .userLevel {
                padding-bottom: 10px;
                text-align: center;
                font-size: 13px;
                color: #666;
            }
        }
        .nav-box {
            .navList {
                border-bottom: 1px solid #f7f7f7;
                li {
                    > a {
                        position: relative;
                        padding: 0 18px;
                        line-height: 35px;
                        color: #999;
                        font-size: 12px;
                        border-left: 2px solid transparent;
                        text-decoration: none;
                        -webkit-user-select: none;
                        cursor: default;
                        &.disable {
                            color: #b9b9b9;
                            border: none;
                            cursor: not-allowed;
                        }
                    }
                    .navList {
                        li {
                            a {
                                display: flex;
                                height: 35px;
                                align-items: center;
                                justify-content: space-between;
                                color: #333;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                cursor: pointer;
                                &:hover,
                                &.active {
                                    color: rgba(0, 106, 222, 1);
                                    border-color: rgba(0, 106, 222, 1);
                                    background: #f9f9f9;
                                }
                                &.disable {
                                    color: #999;
                                    border: none;
                                    background: none;
                                    cursor: not-allowed;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .contain-right {
        position: relative;
        width: 100%;
        padding: 30px 20px;
        .hello {
            width: 100%;
            background: transparent;
            margin-bottom: 20px;
            line-height: 24px;
            height: 24px;
            font-size: 16px;
            color: #fff;
            font-weight: bold;
        }
    }
}
</style>
